<script setup>
    const appConfig = useAppConfig()
</script>

<template>
    <div class="page min-h-screen">
        <div class="container max-w-md">
            <div class="title">
                <span>🐋{{appConfig.appName}}</span>
            </div>
            <main>
                <div class="login-title">
                    <span>👇登录</span>
                </div>
                <div class="login-content ">
                    <div class="username login-item">
                        <div class="username-title login-item-title">
                            🤗用户名
                        </div>
                        <div class="username-input">
                            <MikuInput title="请输入用户名"/>
                        </div>
                    </div>
                    <div class="password login-item">
                        <div class="password-title login-item-title">
                            😎密码
                        </div>
                        <div class="password-input">
                            <MikuInput title="请输入密码"/>
                        </div>
                    </div>
                    <div class="login-button">
                            <MikuButton>🥰登录</MikuButton>
                    </div>
                </div>
            </main>
            <footer>
                <div class="copyright">
                    Copyright 2024 上杉Hanako
                </div>
            </footer>
        </div>
    </div>
</template>

<style scoped>
    .page{
        background-color: var(--login-bg-color);
        display:flex;
        justify-content: center;
        align-items: center;
    }
    .container{
        background-color: var(--login-container-bg-color);
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
        padding: 50px 50px 0;
    }
    .title{
        font-size: var(--login-title-font-size);
        font-weight: bolder;
        margin-bottom: 40px;
    }
    main>.login-title{
        font-size: 1.8rem;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .login-item{
        display: flex;
        flex-direction: column;
        margin-bottom: 30px;
        width: 100%;
    }
    .username{
        margin-bottom: 20px;
    }
    .login-item-title{
        font-size: 1rem;
        text-align: left;
        font-weight: lighter;
        margin-bottom: 10px;
    }
    main{
        margin-bottom: 30px;
    }
    footer{
        text-align: center;
        margin: 20px;
    }
</style>
